<template>
    <view class="vip-item" v-if="data">
        <image mode="aspectFill" :src="easyGetImgUrl(data.ThumbnailUrl50)" class="vip-item-img"></image>
        <view class="vip-item-main">
            <view class="vip-item-name">{{ data.ProductName }}</view>
            <view class="vip-item-price"
                ><text
                    >售价：<text class="strong">¥{{ data.SalePrice }}</text></text
                ><text @click="goDetail" v-if="state != 1" class="edit">设置</text></view
            >
            <view class="vip-item-vip-price" v-if="state == 1"
                ><text
                    >会员价：<text class="strong">¥{{ data.IntervalSalePrice }}</text></text
                ><text @click="goDetail" class="edit">编辑</text></view
            >
        </view>
    </view>
</template>

<script>
export default {
    props: {
        data: {
            type: Object,
            default: {},
        },
        state: {
            type: Number,
            default: 1,
        },
    },
    data() {
        return {}
    },
    mounted() {},
    methods: {
        goDetail() {
            this.easyGoTo("/pages_supplier/packet/vipPrice/set-price?id=" + this.data.ID)
        },
        getTotalNum() {
            let num = 0
            this.data.BuyOrderDetailList.forEach((e) => {
                num += e.Amount
            })
            return num
        },
        getTotalPrice() {
            let price = this.data.PriceSum
            if (price < 0) {
                return 0.0
            } else {
                return price.toFixed(2)
            }
        },
        tsxt() {
            console.log("click...........")
        },
    },
}
</script>

<style lang="scss">
.vip-item {
    margin: 0 $app-item-padding;
    background: #ffffff;
    padding: 32rpx $app-item-padding;
    display: flex;
    .vip-item-img {
        width: 192rpx;
        height: 192rpx;
        border-radius: 24rpx;
        margin-right: $app-item-padding;
    }
    .vip-item-main {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .vip-item-name {
            color: $color-gray-1;
            font-size: 28rpx;
        }
    }
    .vip-item-price {
        color: $color-gray-1;
        font-size: 28rpx;
        display: flex;
        justify-content: space-between;
        .strong {
            font-size: 32rpx;
            color: #252528;
            font-weight: bold;
        }
    }
    .vip-item-vip-price {
        color: $app-color-main;
        font-size: 24rpx;
        display: flex;
        justify-content: space-between;
        .strong {
            font-size: 32rpx;
            color: $app-color-main;
            font-weight: bold;
        }
    }
    .edit {
        width: 96rpx;
        height: 40rpx;
        line-height: 40rpx;
        text-align: center;
        background: #ffffff;
        border-radius: 29rpx;
        border: 1rpx solid #222a42;
        color: #222a42;
        font-size: 24rpx;
    }
}
</style>
